<style lang="less">
  .ue-tool-bar {
    background: #f2f2f2;
    overflow: hidden;
    margin: 0px 0px 10px 0px;
    padding-bottom: 5px;
    .el-date-editor, .el-select, .el-input, .el-cascader {
      width: 100%;
    }
    .el-form-item {
      background: #f2f2f2;
      padding: 10px 0 1px 0;
      margin: 0px;
    }
  }

  .toolbar_collapse {
    height: 45px;
    position: relative;
    overflow: hidden;
    transition: height 0.6s;
  }

  .toolbar_open {
    transition: height 0.6s ease;
  }
</style>
<template>
  <el-col :span="24" class="ue-tool-bar" :class="moreOpt?'toolbar_open':'toolbar_collapse'">
    <el-form :label-position="labelPosition" :label-width="labelWidth">
      <el-col :span="23">
        <slot>
          只有在没有要分发的内容时才会显示。
        </slot>
      </el-col>
      <el-col :span="1" style="padding: 10px 10px 0px 0px;text-align: right">
        <i class="fa fa-lg" :class="moreOpt?'fa-angle-double-up':'fa-angle-double-down'"
           v-bind:style="{display: (moreDisplay?'inline-block':'none')}" @click="moreOpt=!moreOpt"
           style="cursor: pointer"></i>
      </el-col>
    </el-form>
  </el-col>
</template>

<script>
  export default {
    data () {
      return {
        moreOpt: false
      };
    },
    props: {
      moreDisplay: {
        type: Boolean
      },
      labelWidth: {
        default: '140px'
      },
      labelPosition: {
        default: 'right'
      }
    }
  };
</script>
